<template>
    <div class="header">
        <div class="gray"></div>
        <div class="nav">
            <span v-for="(i,index) in nav" :key="index" :class="defaultActive===index?'active':''" @click="$emit('setActive',index,i.path)">{{i.name}}</span>
        </div>
    </div>
</template>
<script>
export default {
    data(){
        return{
            nav:[{
                    name:'点餐',
                    path:'/list'
                },
                {
                    name:'评价',
                    path:'/remark'
                },
                {
                    name:'商家',
                    path:'/store'
                }],
           
        }
    },
    props:['defaultActive','setActive']
}
</script>
<style scoped>
.header{
    width: 100vw;
}
.gray{
    height: 130px;
    width: 100%;
    background: #2e2f3a;
}
.nav{
    font-size: 18px;
    color: #525252;
    margin-top: 20px;
    height: 40px;
    background: #fff;
    width: 100%;
    display: flex;
    justify-content: center;
}
.nav span{
    width: 40px;
    margin: 0 30px;
    height: 27px;
    text-align: center;
    border-bottom: 3px solid #fff;
}
.nav .active{
    color: black;
    border-bottom: 3px solid orange;
}
</style>